<template>
    <div class="container">
        <div class="select_address">
            <div class="select_address_header">
                <van-icon name="arrow-left" size="30px" style="padding: 2vw;" @click="go_back" />
                <div class="title_slt">确认订单</div>
            </div>
            <div class="add_address" v-show="!is_had_Address" @click="addAddress">
                <van-icon name="plus" class="add_icon" />
                <div class="">添加收货地址</div>
            </div>
            <div class="show_address" v-show="is_had_Address" @click="addAddress">
                <div class="show_address_left">
                    <van-icon name="location-o" size="30px" />
                    <div class="my_info">
                        <div style="font-size: 20px; padding: 5px;">收货人：{{is_had_Address.name}}</div>
                        <div class="address">{{is_had_Address.province + is_had_Address.city + is_had_Address.county
                        +is_had_Address.addressDetail}}</div>
                    </div>
                </div>
                <div class="show_address_right" style="padding-right: 5px;">
                    <span>{{is_had_Address.tel}}</span>
                    <van-icon name="arrow" style="padding-top: 5vw;" />
                </div>
            </div>
        </div>
        <div class="goods_detail">
            <div class="goods_info" v-for="item in goods_list">
                <div class="goods_img">
                    <img :src="item.goods_img">
                </div>
                <div class="goods_text">
                    <div class="goods_title">
                        {{item.goods_title}}
                    </div>
                    <div class="goods_type">
                        {{item.goods_cailiao}}
                    </div>
                    <div class="goods_price">
                        <span style="color: red; font-size: 12px;">
                            ￥
                            <span style="font-size: 20px;">{{item.goods_price}}</span>
                        </span>
                        <span style="padding-right: 3vw;">x{{item.goods_num}}</span>
                    </div>
                </div>
            </div>
            <div class="kuaidi">
                <div>配送方式</div>
                <div>{{yunFei == 0?'免运费':'￥'+yunFei}}</div>
            </div>
            <div class="liuyan">
                <span>卖家留言</span>
                <van-cell-group inset autosize>
                    <van-field v-model="liuyan" placeholder="选填：填写内容已和卖家协商确定" />
                </van-cell-group>
            </div>
            <div class="totle">
                <div class="totle_neirong">共计{{goods_list.length}}件商品 小计:
                    <span style="color: red; font-size: 12px;">
                        ￥
                        <span style="font-size: 20px;">{{total}}</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="pay">
            <div>选择付款方式</div>
            <van-radio-group v-model="pay_checked">
                <div class="pay_way">
                    <div>
                        <img src="@/assets/wx_payed.png" class="pay_icon" alt="">
                        <span>微信支付</span>
                    </div>
                    <van-radio name="微信"></van-radio>
                </div>
                <div class="pay_way">
                    <div>
                        <img src="@/assets/zfb_payed.jpg" class="pay_icon" alt="">
                        <span>微信支付</span>
                    </div>
                    <van-radio name="支付宝"></van-radio>
                </div>
            </van-radio-group>
        </div>
        <div class="submit_bar">
            <div class="sub_text">
                <span>合计：</span>
                <span style="color: red; font-size: 12px;">
                    ￥
                    <span style="font-size: 20px;">{{total}}</span>
                </span>
            </div>
            <div class="payed_btn" @click="go_payed">去付款</div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import { Toast } from "vant";
import { ref, computed } from "vue"
import { useRouter, useRoute } from "vue-router";
import { useMainStore } from "@/store";
import Product from "@/api/main";
const _product = new Product()

let is_had_Address: any = ref(false)
let my_store = useMainStore()
_product.getDefaultAddress().then(res => {
    if (res.data.length !== 0) {
        is_had_Address.value = res.data[0]
    }
})



const Router = useRouter()
const Route = useRoute()
let pay_checked = ref('微信')
let liuyan = ref('')

let goods_list: any = ref([])

//判断怎么进入这个页面
if (Route.query.type == 'gwc') {
    goods_list = my_store.jiesuan(1)
} else {
    goods_list = [Route.query]
}



//计算运费
let yunFei = computed(() => {
    let total = 0
    goods_list.forEach((item: any) => {
        total += item.goods_kuaidi - 0
    })
    return total
})
//计算总价
let total: any = computed(() => {
    let all = 0
    goods_list.forEach((item: any) => {
        all += item.goods_price * item.goods_num
    })
    return all
})

// onMounted(() => {

// })



function go_back() {
    Router.go(-1)
}

function go_payed() {
    Toast.success({
        message: `您用${pay_checked.value}支付了${total.value}元`,
        duration: 2000
    })
}

function addAddress() {
    Router.push('/address')
}
</script>
    
<style scoped>
.select_address {
    background-color: #fff;
}

.select_address_header {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 40vw;
}

.add_address {
    padding: 3vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.container {
    background-color: #eee;
    overflow: scroll;
}

.add_icon {
    padding: 2vh;
    font-size: 20px;
    font-weight: 700;
}

.show_address {
    display: flex;
    justify-content: space-between;
    border-bottom: 8px dashed red;
}

.show_address_left {
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.address {
    width: 50vw;
    color: #808080;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.goods_info {
    display: flex;
    border-bottom: 1px solid #eee;
}

.goods_img>img {
    padding: 3vw;
    width: 17vh;
    height: 17vh;
}

.goods_detail {
    margin: 3vw 0;
    background-color: #fff;
}

.goods_title {
    font-size: 16px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.goods_type {
    color: #808080;
}

.goods_text {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.goods_price {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kuaidi {
    padding: 2vh 2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.liuyan {
    padding: 2vw 2vw;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
}

.totle {
    width: 100vw;
    background-color: #fff;
    overflow: hidden;
}

.totle_neirong {
    padding: 3vh 2vw;
    right: 0;
    float: right;
}

/* .pay_wx {
    display: flex;
    justify-content: space-between;
} */

.pay_icon {
    width: 40px;
    height: 40px;
    padding-right: 2vw;
}

.pay_way {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pay_way>div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2vw 0;
}

.pay {
    padding: 3vw 3vw 20vw 3vw;
    background-color: #fff;
}

.submit_bar {
    display: flex;
    height: 10vh;
    position: fixed;
    background-color: #fff;
    bottom: 0;
    width: 100vw;
    justify-content: space-between;
    align-items: center;
}

.payed_btn {
    width: 25vw;
    height: 10vh;
    background-color: red;
    color: #fff;
    font-size: 20px;
    line-height: 10vh;
    text-align: center;
}

.sub_text {
    margin-left: 3vw;
}

.liuyan_ipt {
    margin: 2vw;

}
</style>